<template>
  <view>
    <van-overlay :show="show" z-index="111">
      <view class="wrapper">
        <view class="block">
          运维出勤人员详情
          <van-icon class="clearIcon" name="clear" @click="onClickHide" />

          <view class="tableContent">
            <table stripe emptyText="暂无更多数据" class="tableClass">
              <!-- 表头行 -->
              <thead>
                <tr class="headTr">
                  <th align="center" style="width: 108rpx">出勤人员</th>
                  <th align="center" style="width: 268rpx">运维终端</th>
                  <th align="center" style="width: 288rpx">打卡时间</th>
                </tr>
              </thead>
              <!-- 表格数据行 -->
              <tbody class="tableBody">
                <tr v-for="(row,index) in operatorList" :key="row.id" class="contentClass">
                  <td align="center" class="No" style="width: 108rpx" @click="copyNo(JSON.stringify(row))">
                    <!-- {{ row.equNo !== null ? row.equNo: '/' }} -->
                    {{row.userName !== null ? row.userName : '/'}}
                  </td>
                  <td align="center" style="width: 268rpx" class="type">
                    {{ row.terminalName !== null ? row.terminalName: '/' }}
                  </td>
                  <td align="center" style="width: 288rpx" class="type">
                    {{ row.checkTime !== null ? row.checkTime: '/' }}
                  </td>
                </tr>
              </tbody>
            </table>
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import { getOperatorList } from '@/api/manage'
import { customBaseFlatten } from '@/utils/fun'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    areaId: {
      type: [Number, String],
      required: true
    },
    query: {
      type: Object,
      default: () => {
        return {
          begin: "",
          end: "",
          operatorNames: []
        }
      }
    }
  },
  data() {
    return {
      operatorList: []
    }
  },
  watch: {
    // areaId: {
    //   handler: function (val) {
    //     // console.log(val, 'val-获取区域id')
    //     if (val) this.getOperatorList()
    //   },
    //   immediate: true
    // },
    query: {
      handler: function (val) {
        console.log(val, '获取传来的查询参数+++++++++++++')
        if (Object.keys(val).length) {
          this.getOperatorList()
        }
      },
      deep: true
    }
  },
  onLoad() { },
  methods: {
    copyNo(row) {
      const { equNo } = JSON.parse(row)
      // console.log(equNo, row, 'equNo')
      uni.setClipboardData({
        data: equNo,
        success: function () {
          console.log('success', row);
        }
      });
    },
    getOperatorList() {
      console.log(this.query, customBaseFlatten(this.query.operatorNames), 'this.query')
      getOperatorList({ ...this.query, operatorNames: customBaseFlatten(this.query.operatorNames) }).then(res => {
        // console.log('获取运维详情', res)
        this.operatorList = res.data.data
      })
    },
    onClickHide() {
      uni.$emit('hideDeviceDialog')
    },
  }
}
</script>

<style lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  height: 534rpx;
  background-color: #fff;
  border-radius: 23rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
  position: relative;
  text-align: center;
  padding: 32rpx 0;
  .clearIcon {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    color: rgba(74, 74, 74, 0.73);
    // font-size: 28rpx;
  }
  .tableContent {
    margin-top: 48rpx;
    .tableClass {
      width: 100%;
      thead {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
      .headTr {
        font-weight: bold;
        font-size: 24rpx;
        color: #4a4a4a;
        height: 80rpx;
        letter-spacing: 0;
      }
      .tableBody {
        // width: 100%;
        display: block;
        max-height: 320rpx;
        overflow-y: auto;
      }
      tr {
        display: flex;
        width: 100%;
        table-layout: fixed;
        align-items: center;
      }
      thead th {
        // background: #f5f5f5;
        position: sticky;
        top: 0;
      }
      .contentClass {
        height: 80rpx;

        .No {
          font-size: 20rpx;
          color: #3c8aff;
          text-decoration-line: underline;
        }
        .type {
          font-weight: 800;
          font-size: 24rpx;
          color: #4a4a4a;

          white-space: wrap;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
          letter-spacing: 0;
          text-align: center;
        }
        .sum {
          font-weight: 800;
          font-size: 24rpx;
          color: #989898;
        }
        .date {
          font-weight: 800;
          font-size: 20rpx;
          color: #989898;
        }
        .omUnit {
          font-weight: 800;
          font-size: 24rpx;
          color: #989898;
        }
        .status {
          font-weight: 800;
          font-size: 24rpx;
        }
        .success {
          color: #74cdaf;
          white-space: nowrap;
        }
        .warning {
          color: #fbd333;
          white-space: nowrap;
        }
      }
      .contentClass:nth-child(2n) {
        background: #fff;
      }
      .contentClass:nth-child(2n + 1) {
        background: #eff6fc;
      }
    }
  }
}
</style>